<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <span>学科名称</span> -->
        <div class="left-one">
          <el-form ref="form" class="formone">
            <el-form-item label="学科名称" label-width="80px">
              <el-input v-model="subjectName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="Create" @click="subjectName = null"
                >清除</el-button
              >
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="button-one">
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="(dialogFormVisible = true), (ftform.Modifymode = false)"
            >新增学科</el-button
          >
        </div>
      </div>
      <el-alert type="info" show-icon class="iconalert"
        >数据一共{{ total }}条
      </el-alert>
      <!-- 渲染列表 -->
      <el-table :data="user" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{ timehandle(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            {{ scope.row.isFrontDisplay === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="210">
          <template slot-scope="scope">
            <div class="operation">
              <a @click="catalog(scope)">学科分类</a>
              <a @click="label(scope)">学科标签</a>
              <a @click.prevent="modify(scope)">修改</a>
              <a @click.prevent="deleteUser(scope)">删除</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout=" ->,prev, pager, next,sizes, jumper"
        :total="total"
        background
      >
      </el-pagination>
      <subjects-add
        :ftform="ftform"
        :dialogFormVisible="dialogFormVisible"
        @addsubject="addsubject"
      ></subjects-add>
    </el-card>
  </div>
</template>

<script>
import { list, add, update, remove } from '../../api/hmmm/subjects'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  data () {
    return {

      // 搜索内容
      subjectName: '',
      // 科目数据
      user: [],
      // 总条目数
      total: 0,
      // 当前页码
      page: 1,
      // 每页条目数
      pagesize: 10,
      // 控制子组件
      dialogFormVisible: false,
      ftform: {
        // 学科名称
        name: '',
        // 是否显示
        delivery: false,
        // 是否开启修改模式
        Modifymode: false,
        // id
        id: null
      }
    }
  },
  methods: {
    // 跳转标签
    label (e) {
      this.$router.push({
        name: 'subjects-tags',
        params: {
          id: e.row.id,
          name: e.row.subjectName
        }
      })
    },
    // 跳转目录
    catalog (e) {
      this.$router.push({
        name: 'subjects-directorys',
        params: {
          id: e.row.id,
          name: e.row.subjectName
        }
      })
    },
    // 删除元素
    deleteUser (e) {
      const data = {
        id: e.row.id
      }

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(data).then((index) => {
          if (index.data.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getuser()
          }
        }).catch(() => {

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    modify (e) {
      if (e.row.isFrontDisplay === 1) {
        this.ftform.delivery = true
      } else if (e.row.isFrontDisplay === 0) {
        this.ftform.delivery = false
      }
      this.ftform.name = e.row.subjectName
      this.ftform.Modifymode = true
      this.dialogFormVisible = true
      this.ftform.id = e.row.id
    },
    // 新增学科
    addsubject (e) {
      if (e.determine) {
        if (e.Modifymode) {
          const data = {
            id: e.id,
            subjectName: e.name,
            isFrontDisplay: e.delivery ? 1 : 0
          }

          update(data).then((index) => {
            if (index.data.success) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getuser()
            }
          })
        } else {
          const data = {
            subjectName: e.name,
            isFrontDisplay: e.delivery ? 1 : 0
          }
          add(data).then((e) => {
            if (e.status === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getuser()
            }
            // console.log(e)
          }).catch(() => {

          })
        }
      }

      // console.log(data)
      this.ftform.name = ''
      this.ftform.delivery = false

      this.dialogFormVisible = false
    },
    // 点击搜索
    onSubmit () {
      this.page = 1
      this.getuser()
    },
    // 页数改变
    handleCurrentChange (val) {
      // console.log(val)
      this.page = val
      this.getuser()
    },
    // 每页条数改变
    handleSizeChange (val) {
      // console.log(val)
      this.pagesize = val
      this.getuser()
    },
    // 时间处理方法
    timehandle (e) {
      function zero (e) {
        return e < 10 ? '0' + e : e
      }
      const oritime = new Date(e)
      const yyyy = oritime.getFullYear()
      const mm = zero(oritime.getMonth() + 1)
      const dd = zero(oritime.getDate())
      const hh = zero(oritime.getHours())
      const min = zero(oritime.getMinutes())
      const ss = zero(oritime.getSeconds())
      return `${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`
    },
    // 获取列表数据
    getuser () {
      const params = {
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.subjectName

      }
      list(params).then((e) => {
        // console.log(e)
        if (e.status === 200) {
          this.user = e.data.items
          this.page = e.data.page
          this.total = e.data.counts
          this.pagesize = Number.parseInt(e.data.pagesize)
        }
      })
    }
  },
  created () {
    this.getuser()
  },
  components: {

    SubjectsAdd

  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 7px 10px;
}
.formone {
  display: flex;

  .el-form-item--medium {
    margin-bottom: 0;
  }
  .Create {
    margin-left: 10px;
  }
}
.clearfix {
  .left-one {
    float: left;
  }
  // display: flex;
  // justify-content: space-between;
  .button-one {
    float: right;
  }
}
// .clearfix:after {
//   content: "";
// }
.iconalert {
  /deep/.el-alert__icon {
    font-size: 20px;
  }
}
// 分页样式
.el-pagination {
  // display: flex;
  // justify-content: flex-end;
  margin-top: 20px;
}
.operation {
  display: flex;
  justify-content: space-between;
  color: skyblue;
}
</style>
